const menus = [
  {
    desc: "几何体-立方体",
    name: "geometry_cube",
  },
  {
    desc: "几何体-拉伸",
    name: "geometry_extrude",
  },
  {
    desc: "几何体-字体",
    name: "geometry_font",
  },
  {
    desc: "几何体-我的世界",
    name: "geometry_minecraft",
  },
  {
    desc: "几何体-路径",
    name: "geometry_path",
  },
  {
    desc: "几何体-渐变颜色",
    name: "geometry_color",
  },
  {
    desc: "材质-汽车",
    name: "material_car",
  },
  {
    desc: "材质-发光小球",
    name: "material_lightball",
  },
  {
    desc: "材质-折射",
    name: "material_refraction",
  },
  {
    desc: "材质-折射小球",
    name: "material_refraction_ball",
  },
  {
    desc: "材质-镜面反射",
    name: "material_refrection",
  },
  {
    desc: "材质-草地纹理",
    name: "material_grass",
  },
  {
    desc: "材质-墙纸阴影",
    name: "material_wallpaper",
  },
  {
    desc: "材质-模型贴图",
    name: "material_standard",
  },
  {
    desc: "材质-调整位置",
    name: "material_custom",
  },
  {
    desc: "着色器-天空盒",
    name: "shader_sky",
  },
  {
    desc: "物理引擎-漫游交互",
    name: "cannon_demo1",
  },
  {
    desc: "物理引擎-模型交互",
    name: "cannon_demo2",
  },
  {
    desc: "灯光-直射光",
    name: "light_directional",
  },
  {
    desc: "灯光-物理光",
    name: "light_physical"
  },
  {
    desc: "裁切-球形裁切",
    name: "clip_sphere"
  },
  {
    desc: "相机-测试",
    name: "camara_test"
  },
  {
    desc: "相机-投影相机和正交相机",
    name: "camera_demo1"
  },
  {
    desc: "交互-第一人称",
    name: "inte_firstperson"
  }
];

function generateMenus() {
  let ul = document.createElement("ul");
  menus.forEach((menu) => {
    let li = document.createElement("li");
    let a = document.createElement("a");
    a.innerHTML = menu.desc;
    a.setAttribute("href", `#/${menu.name}`);
    li.appendChild(a);
    ul.appendChild(li);
  });
  document.body.appendChild(ul);
}

document.body.innerHTML = "";
let currentUrl = location.hash.substring(2);
if (!currentUrl) {
  generateMenus();
} else {
  require(`./${currentUrl}.ts`);
}

window.addEventListener("hashchange", () => {
  let url = location.hash.substring(2);
  if (url) {
    document.body.innerHTML = "";
    require(`./${url}.ts`);
  }
});

window.addEventListener("popstate", function () {
  location.reload();
});
